import {designPage, getComponentCls, iMouseEvent, reactive, useRefs} from "plain-design-composition";
import {Button, Checkbox} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";
import {usePopup} from "../../../../packages/components/usePopup/usePopup";
import {ePopupAnimation, ePopupTrigger, iPopupPlacement, iPopupUseOption} from "../../../../packages/components/usePopup/utils/popup.utils";
import ButtonGroup from "../../../../packages/components/ButtonGroup";
import {useMove} from "../../../../packages/utils/useMove";
import {useReferenceTrigger} from "../../../../packages/components/usePopup/trigger/useReferenceTrigger";

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({ button: Button });

  const { $popup, popupId } = usePopup();

  const state = reactive({
    placement: 'top' as iPopupPlacement,
    arrow: true,
    boundary: true,
    refreshOnScroll: true,
    hideOnScroll: false,
    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
    interactive: true,
    hideOnClickReference: true,
    sizeEqual: false,
    animation: ePopupAnimation.slide as typeof ePopupAnimation.TYPE,

    placementListArray: [
      ['top', 'bottom', 'left', 'right',],
      ['top-start', 'top-center', 'top-end',],
      ['bottom-start', 'bottom-center', 'bottom-end',],
      ['left-start', 'left-center', 'left-end',],
      ['right-start', 'right-center', 'right-end',],
    ] as iPopupPlacement[][],

    triggers: [
      ePopupTrigger.click,
      ePopupTrigger.contextmenu,
      ePopupTrigger.hover,
      ePopupTrigger.focus,
      ePopupTrigger.manual,
    ] as typeof ePopupTrigger.TYPE[],

    animations: [
      ePopupAnimation.fade,
      ePopupAnimation.slide,
      ePopupAnimation.drop,
      ePopupAnimation.scale,
      ePopupAnimation["scale-y"],
    ] as typeof ePopupAnimation.TYPE[],
  });

  const utils = {
    getOption: (): iPopupUseOption => {
      return {
        id: popupId,
        type: "1",
        placement: state.placement,
        reference: refs.button!.refs.el!,
        trigger: state.trigger,
        arrowSize: state.arrow ? undefined : 0,
        boundary: state.boundary ? `#boundary-${popupId}` : undefined,
        refreshOnScroll: state.refreshOnScroll,
        hideOnScroll: state.hideOnScroll,
        interactive: state.interactive,
        hideOnClickReference: state.hideOnClickReference,
        sizeEqual: state.sizeEqual,
        animation: state.animation,
        render: () => (
          <div>
            <div>桃花坞里桃花庵;</div>
            <div>桃花庵里桃花仙;</div>
            <div>桃花仙人种桃树;</div>
            <div>又摘桃花换酒钱;</div>
          </div>
        )
      };
    },
    update: () => {
      $popup.update(utils.getOption());
    },
  };

  useMove({
    elGetter: () => refs.button?.refs.el,
    onMove: () => $popup.refresh(utils.getOption())
  });

  useReferenceTrigger({
    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
    getOption: () => utils.getOption(),
    manager: $popup.manager,
  });

  return () => (
    <DemoRow title="基本用法">
      <div id={`boundary-${popupId}`} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Button label="POPUP" ref={onRef.button} type="primary"/>
      </div>
      {state.placementListArray.map(list => (
        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
          {list.map(item => (
            <Button
              key={item}
              label={item}
              type={item === state.placement ? 'primary' : undefined}
              onClick={() => {
                state.placement = item;
                utils.update();
              }}
            />
          ))}
        </ButtonGroup>
      ))}
      <div style={{ height: '24px' }}/>
      <ButtonGroup>
        {state.triggers.map(trigger => (
          <Button
            key={trigger}
            label={trigger}
            type={trigger === state.trigger ? 'primary' : undefined}
            onClick={() => {
              state.trigger = trigger;
              utils.update();
            }}
          />
        ))}
      </ButtonGroup>
      <div style={{ height: '24px' }}/>
      <ButtonGroup>
        {state.animations.map(animation => (
          <Button
            key={animation}
            label={animation}
            type={animation === state.animation ? 'primary' : undefined}
            onClick={() => {
              state.animation = animation;
              utils.update();
            }}
          />
        ))}
      </ButtonGroup>
      <div style={{ height: '24px' }}/>
      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
      <div style={{ height: '24px' }}/>
      <Checkbox label="boundary" v-model={state.boundary} onChange={utils.update}/>
      <div style={{ height: '24px' }}/>
      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
      <div style={{ height: '24px' }}/>
      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
      {state.trigger === ePopupTrigger.hover && <>
        <div style={{ height: '24px' }}/>
        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
      </>}
      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
        <div style={{ height: '24px' }}/>
        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
      </>}
      <div style={{ height: '24px' }}/>
      <Checkbox label="sizeEqual" v-model={state.sizeEqual} onChange={utils.update}/>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({ button: Button, boundary: HTMLDivElement });

  const { $popup, popupId } = usePopup();

  const state = reactive({
    placement: 'top' as iPopupPlacement,
    arrow: true,
    boundary: true,
    refreshOnScroll: true,
    hideOnScroll: false,
    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
    interactive: true,
    hideOnClickReference: true,

    placementListArray: [
      ['top', 'bottom', 'left', 'right',],
      ['top-start', 'top-center', 'top-end',],
      ['bottom-start', 'bottom-center', 'bottom-end',],
      ['left-start', 'left-center', 'left-end',],
      ['right-start', 'right-center', 'right-end',],
    ] as iPopupPlacement[][],

    triggers: [
      ePopupTrigger.click,
      ePopupTrigger.contextmenu,
      ePopupTrigger.hover,
      ePopupTrigger.focus,
      ePopupTrigger.manual,
    ] as typeof ePopupTrigger.TYPE[]
  });

  const utils = {
    getOption: (): iPopupUseOption => {
      return {
        id: popupId,
        type: "1",
        placement: state.placement,
        reference: refs.button!.refs.el!,
        trigger: state.trigger,
        arrowSize: state.arrow ? undefined : 0,
        refreshOnScroll: state.refreshOnScroll,
        hideOnScroll: state.hideOnScroll,
        interactive: state.interactive,
        hideOnClickReference: state.hideOnClickReference,
        stickyReference: refs.boundary,
        render: () => (
          <div>
            <div>桃花坞里桃花庵;</div>
            <div>桃花庵里桃花仙;</div>
            <div>桃花仙人种桃树;</div>
            <div>又摘桃花换酒钱;</div>
          </div>
        )
      };
    },
    update: () => {
      $popup.update(utils.getOption());
    },
  };

  useMove({
    elGetter: () => refs.button?.refs.el,
    onMove: () => $popup.refresh(utils.getOption())
  });

  useReferenceTrigger({
    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
    getOption: () => utils.getOption(),
    manager: $popup.manager,
  });

  return () => (
    <DemoRow title="StickyReference">
      <div ref={onRef.boundary} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Button label="POPUP" ref={onRef.button} type="primary"/>
      </div>
      {state.placementListArray.map(list => (
        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
          {list.map(item => (
            <Button
              key={item}
              label={item}
              type={item === state.placement ? 'primary' : undefined}
              onClick={() => {
                state.placement = item;
                utils.update();
              }}
            />
          ))}
        </ButtonGroup>
      ))}
      <div style={{ height: '24px' }}/>
      <ButtonGroup>
        {state.triggers.map(trigger => (
          <Button
            key={trigger}
            label={trigger}
            type={trigger === state.trigger ? 'primary' : undefined}
            onClick={() => {
              state.trigger = trigger;
            }}
          />
        ))}
      </ButtonGroup>
      <div style={{ height: '24px' }}/>
      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
      <div style={{ height: '24px' }}/>
      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
      <div style={{ height: '24px' }}/>
      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
      {state.trigger === ePopupTrigger.hover && <>
        <div style={{ height: '24px' }}/>
        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
      </>}
      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
        <div style={{ height: '24px' }}/>
        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
      </>}
    </DemoRow>
  );
});

export const demoAbsolute = designPage(() => {

  const { $popup } = usePopup();

  const handler = {
    onContextmenu: (e: iMouseEvent) => {
      e.preventDefault();
      $popup.absolute({
        x: e.clientX,
        y: e.clientY,
        type: 'demo-absolute',
        placement: 'right-start',
        trigger: 'contextmenu',
        render: () => (
          <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        )
      });
    },
  };

  return () => (
    <DemoRow title="绝对定位">
      <div onContextMenu={handler.onContextmenu} style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>
    </DemoRow>
  );
});
